<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>搜索结果</title>
</head>

<body>
    <div id="search" class="center" v-if="type">
        <!-- 左侧导航栏 -->
        <left-nav :menu="type"></left-nav>
        <!-- 右侧结果列表 -->
        <div id="result">
            <!-- 文章列表 -->
            <div>
                <my-article v-for="article in articles" :article="article"></my-article>
            </div>
            <!-- 用户列表 -->
            <div v-if="users" class="user">
                <ul>
                    <li v-for="u in users" class="center">
                        <div v-if="u" class="center">
                            <a :href="'/user/' + u.userId">
                                <div class="headImage" :style="{'background-image':'url('+u.headImage+')'}">
                                    <span class="large">{{u.name}}</span>
                                </div>
                            </a>
                            <div class="info">
                                <p>关注{{u.follows}}</p>
                                <p>粉丝{{u.fans}}</p>
                                <p>文章{{u.articles}}</p>
                            </div>
                        </div>
                        <div class="small gray" style="margin-left: 24px;">
                            <p>
                                个人介绍：
                                <span class="profile"></span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 分类列表 -->
            <div v-if="classify" class="classify">
                <ul>
                    <li v-for="c in classify" class="center">
                        <!-- 专题头部 -->
                        <div v-if="c">
                            <a :href="'/classify/' + c.classifyId">
                                <div class="headImage" :style="{'background-image':'url('+c.image+')'}">
                                    <span class="large">{{c.name}}</span>
                                </div>
                            </a>
                            <div class="small gray">
                                <p class="center">收录了{{c.articles}}篇文章</p>
                                <p class="center">{{c.fans}}人关注</p>
                            </div>
                        </div>
                        <div style="width: 68%;">
                            <p class="center large">专题公告</p>
                            <!-- 专题描述 -->
                            <p class="gray desc">{{c.description}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script src="/js/search.js"></script>
    <link rel="stylesheet" href="/css/search.css">
</body>

</html>